<template>
  <view
    class="region_detail_box"
    @touchmove="refresh.moveTouchendHandler"
    @touchstart="refresh.startTouchendHandler"
    @touchend="refresh.endTouchendHandler"
  >
    <!-- 顶部导航栏 -->
    <top-navigation-bar :roll-distance="rollDistance">
      <template #left>
        <view class="icon_list">
          <view class="icon" @click="goBack">
            <uni-icons type="left" color="rgb(55, 52, 52)" size="24" />
          </view>
          <view class="icon" @click="goIndex">
            <uni-icons type="shop" color="rgb(55, 52, 52)" size="24" />
          </view>
        </view>
      </template>
      <template #middle> </template>
      <template #right> </template>
    </top-navigation-bar>

    <!-- 轮播图 -->
    <carousel :height="400" :list-image="carouselList" mode="image" />

    <!-- 房源信息 -->
    <view class="content">
      <!-- 基本信息 -->
      <binary-layout :left-text="regionInfo.district" :size="28">
        <template #left>
          <view class="info">
            <price
              :data="format.priceHandler(regionInfo.price)"
              :font-size="36"
              :sign-size="22"
              text="元/月起"
            />
          </view>
        </template>
        <template #right>
          <view class="bth bth_info" @click="toDetail"> 社区详情 </view>
        </template>
      </binary-layout>

      <!-- 标题 -->
      <headline title="房源列表">
        <template>
          <view class="list_select">
            <uni-icons type="search" size="20" />
            <input type="text" placeholder="请输入房间号" />
          </view>
        </template>
      </headline>

      <!-- 房源列表 -->
      <binary-layout
        :left-text="item.roomNumber"
        :size="26"
        :right-text="'详情'"
        v-for="(item, index) in houseList"
        :key="index"
      >
        <template #left>
          <price
            :data="format.priceHandler(item.houseDiscount ?? item.housePrice)"
            :other-data="item.housePrice"
            :font-size="26"
            :sign-size="22"
          />
        </template>
        <template #right>
          <view class="bth" @click="toAgency(item.houseId)"> 签约 </view>
        </template>
      </binary-layout>

      <!-- 加载状态 -->
      <load :status="loadStatue"  :isImage="houseList.length<1" />
    </view>

    <!-- 按钮点击 -->
    <button-click msg="预约看房" @on-click="toBooking" />

    <!-- 下拉刷新 -->
    <pull-down-refresh
      :opacity="refresh.moveBottom.value / 3"
      :enble-anim="refresh.isRefresh.value"
    />
  </view>
</template>
<!-- 区域详情 -->
<script lang="ts" setup>
import { ReqSelectHousesByRegion } from '@/api/houses'
import headline from '@/components/common/headline/headline.vue'
import { useUserStore } from '@/store/user'
import buttonClick from '@/components/common/button_click/button-click.vue'
import price from '@/components/common/price/price.vue'
import binaryLayout from '@/components/layout/binary_layout/binary-layout.vue'
import carousel from '@/components/layout/carousel/carousel.vue'
import topNavigationBar from '@/components/business/top_navigation_bar/top-navigation-bar.vue'
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'
import format from '@/util/format'
import { refreshHandler } from '@/components/common/pull_down_refresh'
import type {
  PageHouseByRegion,
  QueryPageHouseByRegion,
} from '@/config/data/data'

//当前页面滚动距离
const rollDistance = ref(0)

//社区id
const regionInfo = ref({
  id: 0,
  price: 0,
  district: '',
})

//房屋列表信息
const houseList = ref<PageHouseByRegion[]>([])

//监听页面滚动
onPageScroll((e: any) => {
  //最大滚动距离不为40
  if (e.scrollTop < 40) {
    rollDistance.value = parseInt(e.scrollTop)
  }
})

//下拉刷新控制函数
const refresh = refreshHandler(300)

/**
 * 轮播图数据列表
 */
const carouselList = ref<string[]>([
  'https://www.lyzhnb.top/waxl/classify/%E4%BA%BA%E5%A3%B0.jpg',
  'https://www.lyzhnb.top/waxl/classify/%E5%BF%83%E6%83%85.jpg',
  'https://www.lyzhnb.top/waxl/classify/%E6%B5%B7%E6%B5%AA.jpg',
])

//监听页面是否刷新
watch(
  () => refresh.isRefresh.value,
  (newValue, oldValue) => {
    if (newValue) {
      pageQuery.value.page = 0
      nextData().finally(() => {
        refresh.refreshEnd(500)
      })
    }
  }
)

//加载状态
const loadStatue = ref(1)

//返回上一页
const goBack = () => {
  try {
    uni.navigateBack({ delta: 1 })
  } catch (err) {
    goIndex()
  }
}

//返回首頁
const goIndex = () => {
  uni.switchTab({ url: '/pages/index/index' })
}

//是否登录
const { isLogin } = useUserStore()

//防抖
const isReq = ref(true)

//分页查询参数
const pageQuery = ref<QueryPageHouseByRegion>({
  page: 0,
  size: 20,
  id: 0,
})

/**
 * @param refresh 是否刷新
 * 下一页
 */
const nextData = (refresh: boolean = false) => {
  return new Promise((reslove) => {
    if (!isReq.value || loadStatue.value == -1) {
      reslove(true)
    }
    isReq.value = false
    loadStatue.value = 0
    pageQuery.value.page += 1
    ReqSelectHousesByRegion(pageQuery.value)
      .then((res) => {
        if (
          res.code == 200 &&
          res.data &&
          res.data.length == pageQuery.value.size
        ) {
          refresh ? (houseList.value = []) : ''
          loadStatue.value = 1
          houseList.value.push(...res.data)
        } else if (
          res.code == 200 &&
          res.data &&
          res.data.length < pageQuery.value.size
        ) {
          refresh ? (houseList.value = []) : ''
          loadStatue.value = -1
          houseList.value.push(...res.data)
        }
      })
      .finally(() => {
        isReq.value = true
        reslove(true)
      })
  })
}

//跳转预约页面
const toBooking = ()=>{
  uni.navigateTo({ url: `/subpkg/booking/book_viewing?district=${regionInfo.value.district}` })
}

//页面到达底部
onReachBottom(() => {
  if (loadStatue.value == -1) {
    return
  }
  nextData()
})

//前往签约
const toAgency = (id: number) => {
  isLogin()
}

//跳转社区详情
const toDetail = () => {
  uni.navigateTo({
    url: `/subpkg/house/house_detail?id=${regionInfo.value.id}`,
  })
}

//页面加载
onLoad((e) => {
  if (e && e.id) {
    pageQuery.value.id = e.id
    nextData()
    regionInfo.value.id = e.id
    regionInfo.value.district = e.district
    regionInfo.value.price = parseFloat(e.price)
  }
})
</script>

<style scoped lang="scss">
.region_detail_box {
  width: 100%;
  min-height: 100vh;
  background-color: $uni-bg-color-grey;

  .icon_list {
    width: 100%;
    display: flex;
    align-items: center;
    .icon {
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      margin-right: 30rpx;
      background-color: $uni-bg-color;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }
  }

  .content {
    width: calc(100% - 60rpx);
    padding: 0 30rpx;

    .bth {
      display: flex;
      color: rgb(244, 153, 88);
      background-color: rgb(250, 214, 160);
      width: fit-content;
      padding: 4rpx 14rpx;
      border-radius: 6rpx;
      font-size: 22rpx;
      margin-left: auto;
    }

    .bth_info {
      padding: 0 18rpx !important;
      font-size: 26rpx;
    }

    .info {
      display: flex;
      font-size: 22rpx;
      align-items: flex-end;
      color: rgb(246, 157, 74);
    }

    .list_select {
      width: 272rpx;
      display: flex;
      align-items: center;
      height: 60rpx;
      border-radius: 60rpx;
      background-color: $uni-bg-color;
      padding: 6rpx 14rpx;
      box-shadow: rgba(99, 99, 99, 0.023) 0px 2px 8px 0px;

      input {
        height: 100%;
        margin-left: 10rpx;
      }
    }
  }
}
</style>
